import {IconImg} from '@/components/image'
import RollerDigital from '@/components/rollerDigital'
import {SplitLine} from '@/components/splitLine'
import {CnBoldSpan, CnNormalP, CnNormalSpan} from '@/components/text'

export const ScreenCard = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props, {slots}) {
    return () => (
      <div class='ScreenCard w-full h-full rounded-10 bg-white overflow-hidden'>
        <div
          class='ScreenCard-header h-28 flex items-center mb-10'
          style={{
            background: 'linear-gradient(to right,#BBE4FA, #FFFFFF)'
          }}
        >
          <IconImg imgName='waterDrop' class='inline-block w-17 h-26 ml-10'></IconImg>
          <CnBoldSpan class='ml-4 text-16'>{props.title}</CnBoldSpan>
        </div>
        <div class='ScreenCard-content px-17 flex flex-col gap-y-16'>{slots.default?.()}</div>
      </div>
    )
  }
})

export const DevWatchMsgItem = defineComponent({
  props: {
    title: String,
    value: {
      type: Number,
      required: true
    },
    unit: String
  },
  setup(props, ctx) {
    return () => (
      <div>
        <CnNormalP class='text-12'>{props.title || ''}</CnNormalP>
        <div class='flex items-center'>
          <RollerDigital class='text-18' endVal={props.value} separator=''></RollerDigital>
          <CnNormalSpan class='text-12 ml-3'>{props.unit || ''}</CnNormalSpan>
        </div>
      </div>
    )
  }
})

export const CardChild = defineComponent({
  props: {
    title: String
  },
  setup(props, {slots}) {
    return () => (
      <div class='cardChild'>
        <div class='cardChild-header h-18 mb-10 flex items-center'>
          <SplitLine
            class='w-3 py-4 mr-4'
            style={{
              backgroundColor: '#0471B6'
            }}
          ></SplitLine>
          <CnNormalSpan>{props.title}</CnNormalSpan>
        </div>
        <div class='cardChild-content'>{slots.default?.()}</div>
      </div>
    )
  }
})
